
function Accordion(){
	
};

/**
 * @author Alisson.Antunes.Freitag
 * 
 * Accordion - Criação no 'html'.
 * <p>Para criar um novo accordion no html, você apenas precisa:</p>
 * 
 * <p><a href="#{facesContext.externalContext.requestContextPath}/resources/componentes/accordion/js/criando Accordion no html.txt">Documentação</a></p>
 * 
 * "------------------------------------------------------------------------------------------------"
 * Accordion - Options
 * @param seletor(Caminho do campo a ser executado o Accordion)
 * @param config(Parâmetro que chama os atributos do Accordion)
 * 
 *<ul>
 *<li><p><b>collapsible</b> - Permite que; ao clicar em um 'Accordion' que esteja aberto,  </p>
 *<li><p>seja fechado novamente.</p>
 *Tipo: Boolean
 *<b>Exemplo de uso:</b> 
 *<p>var json = {collapsible: true};</p>
 *<p>accordion."método"("seletor",json);</p>
 *</ul>
 *
 *<ul>
 *<li><p><b>active</b> - Que o painel está aberto.</p>
 *<li><p>Definir 'active' para false, irá recolher todos os painéis. Isto requer que a opção 'collapsible' seja true.</p> 
 *<b>Exemplo de uso:</b>
 *
 *<p>var json = {active: true};</p>
 *	       
 *<p>accordion."método"("seletor",json);</p>
 *</ul>
 *
 *<ul>
 *<li><p><b>animate</b> - Abre o 'Accordion' com efeito animado. 
 *Tipo: Boolean ou Number ou String ou Object,</p>
 *<b>Exemplo de uso:</b>
 *
 *<p>var json = {animate: "easeOutBounce" OU animate:true OU animate: 400};</p>
 *<p>accordion."método"("seletor",json);</p>
 *<p>Veja mais animações em: http://api.jqueryui.com/easings/</p>
 *</ul>
 *
 *<ul>
 *<li><p><b>icons</b> - Define os tipos de icones para o Accordion.</p>
 *<p>header = O icone aparecerá 'fechado'. Quando o Accordion estiver fechado</p>
 *<p>activeHeader = O icone aparecerá quando o Accordion estiver aberto</p>
 *<b>Exemplo de uso:</b>
 *
 *<p>var json = { 
 *<p> icons: { "header": "ui-icon-carat-1-e", "activeHeader": "ui-icon-carat-1-s" },</p>
 *<p>};</p>
 *<p>accordion."método"("seletor",json);</p>
 *<p>Veja mais icones em: http://api.jqueryui.com/theming/icons/</p>
 *</ul>
 *
 *<ul>
 *<li><p><b>event </b> - Define como será aberto o Accordion.</p>
 *<b>Exemplo de uso: </b>
 *<p>var json = {event: "mouseover"};</p>
 *<p>accordion."método"("seletor",json);</p>
 *<p>Voce poderá ver mais da Option 'event' em: http://api.jqueryui.com/theming/icons/</p>
 *</ul>
 *
 *<ul>
 *<li><p><b>heightStyle</b> - Com heightStyle você controla a altura do accordion e cada painel.</p>
 *<b>Exemplo de uso:</b>
 *
 *<p>var json = {heightStyle: "fill"};</p>
 *<p>calendario."método"("seletor",json);</p>
 *<p>Temos três opções:</p>
 *<p>"auto": Todos os painéis serão definidos como altura mais alta.</p>
 *<p>"fill": Expande a uma altura disponível com base na altura do "Accordion Pai".</p>
 *<p>"content": Cada painel será tão alto quanto seu conteúdo.</p>
 *</ul>
 *
 *<ul>
 *<li><p><b>disabled</b> - O usuário poderá definir queo accordion seja desabilitado.</p>
 *<p>Tipo: Boolean</p>
 *<b>Exemplo de uso:</b>
 *
 *<p>var json = {disabled: false};</p>
 *
 *<p>accordion."método"("seletor",json);</p>
 *</ul>
 *
 *<ul>
 *<li><p><b>header</b> - Define por '.find()', o cabeçalho do Accordion.</p>
 *<p>Tipo: Selector</p>
 *<b>Exemplo de uso:</b>
 *
 *<p>var json = {header: "h3"};</p>
 *<p>accordion."método"("seletor",json);</p>
 *</ul>
 *
 *
 */
Accordion.prototype.construindoAccordion = function(seletor, config){
	
	var jsonDefault = {
			
		active: true,
		collapsible: true, 
		animate: "linear",
		icons: { "header": "ui-icon-carat-1-e", "activeHeader": "ui-icon-carat-1-s" },
		heightStyle: "fill",
		event: "click",
					
	};		
	
	$(seletor).accordion(jsonDefault, config);
};




//************************************************************** FUNÇÕES 

// DESTROI POR COMPLETO O ACCORDION
Accordion.prototype.destroy = function(seletor){

		$(seletor).accordion('destroy');
};

// DESABILITA INCLUSIVE O CONTEUDO E O ACCORDION
Accordion.prototype.disable = function(seletor){
			
		$(seletor).accordion('disable');
	
};

Accordion.prototype.refresh = function(seletor){
	
	$(seletor).accordion('refresh');
	
};


Accordion.prototype.enable = function(seletor){

		$(seletor).accordion('enable');
};


Accordion.prototype.instance = function(seletor){
	
	$(seletor).accordion('instance');
	
};

/******************************************************** EVENTOS ***************************************************************/

Accordion.prototype.create = function(seletor){
	
	$(seletor).accordion({
		
		create: function(event, ui){
			
			$(seletor).on('click',function(){
				
				var active = $('#accordion').accordion('option', 'active');
			    
				$('#accordion').append
			    ('<h3 id="cabecalho"></h3>' +
			    '<div><p id="corpo"></p></div>').accordion('destroy').accordion({ 
			    
			    	active: active,
			    	collapsible: true,
			    	animate: "easeOutBounce",
					icons: { "header": "ui-icon-carat-1-e", "activeHeader": "ui-icon-carat-1-s" },
					heightStyle: "content",
					event: "click",
			    	
			    });							
			});
		},
	});	
};


Accordion.prototype.whereActiveOrNot = function(seletor, header){
		
		if(header != undefined){
		
			$(seletor).accordion({
				
				beforeActivate: function(){
					
					$(this).accordion({icons: { "header": header, "activeHeader": "ui-icon-arrowreturnthick-1-n" }});
					
				},
				
				activate: function(){
					
					$(this).accordion({icons: { "header": header, "activeHeader": "ui-icon-arrowreturnthick-1-s" }});
					
				}
		
		});			
		}
		
};


var accordion = new Accordion();
